<template>
  <a-form-item :label="item.label" :name="item.name" :rules="item.rules">
    <a-input
      v-if="item.type == FormItemType.INPUT"
      :placeholder="item.placeholder"
      v-model:value="sourceData[item.name]"
      @pressEnter="item.pressEnter"
      @change="item.change"
      allowClear
      :disabled="item.disabled"
    ></a-input>

    <a-input-password
      v-if="item.type == FormItemType.PASSWORD"
      :placeholder="item.placeholder"
      v-model:value="sourceData[item.name]"
      @pressEnter="item.pressEnter"
      @change="item.change"
      allowClear
      :disabled="item.disabled"
    ></a-input-password>

    <a-textarea
      v-if="item.type == FormItemType.TEXTAREA"
      :placeholder="item.placeholder"
      v-model:value="sourceData[item.name]"
      @pressEnter="item.pressEnter"
      @change="item.change"
      allowClear
      :rows="item.rows"
      :disabled="item.disabled"
    ></a-textarea>

    <a-input-number
      v-if="item.type == FormItemType.NUMBER"
      :placeholder="item.placeholder"
      v-model:value="sourceData[item.name]"
      @pressEnter="item.pressEnter"
      @change="item.change"
      allowClear
      :min="item.min"
      :max="item.max"
      :disabled="item.disabled"
    ></a-input-number>

    <a-select
      v-if="item.type == FormItemType.SELECT"
      :mode="item.mode"
      v-model:value="sourceData[item.name]"
      :placeholder="item.placeholder"
      allowClear
      @change="item.change"
      :disabled="item.disabled"
    >
      <a-select-option
        v-for="source in item.sourceData"
        :key="source[item.props.value]"
        >{{ source[item.props.label] }}</a-select-option
      >
    </a-select>

    <a-radio-group
      v-if="item.type == FormItemType.RADIO"
      v-model:value="sourceData[item.name]"
      :button-style="item.style || 'outline'"
      @change="item.change"
      :disabled="item.disabled"
    >
      <template v-if="item.style == 'solid'">
        <a-radio-button
          :value="source[item.props.value]"
          v-for="source in item.sourceData"
          :key="source[item.props.value]"
        >
          {{ source[item.props.label] }}
        </a-radio-button>
      </template>
      <template v-else>
        <a-radio
          :value="source[item.props.value]"
          v-for="source in item.sourceData"
          :key="source[item.props.value]"
        >
          {{ source[item.props.label] }}
        </a-radio>
      </template>
    </a-radio-group>

    <a-checkbox-group
      v-if="item.type == FormItemType.CHECKBOX"
      v-model:value="sourceData[item.name]"
      @change="item.change"
      :disabled="item.disabled"
    >
      <a-checkbox
        :value="source[item.props.value]"
        v-for="source in item.sourceData"
        :key="source[item.props.value]"
      >
        {{ source[item.props.label] }}
      </a-checkbox>
    </a-checkbox-group>

    <a-switch
      v-if="item.type == FormItemType.SWITCH"
      v-model:checked="sourceData[item.name]"
      :checkedChildren="item.checkedChildren"
      :unCheckedChildren="item.unCheckedChildren"
      @change="item.change"
      :disabled="item.disabled"
    />

    <template v-if="item.type == FormItemType.DATE">
      <a-date-picker
        :locale="locale"
        v-if="item.style == 'date'"
        v-model:value="sourceData[item.name]"
        @change="item.change"
        :show-time="{ defaultValue: moment() }"
        :placeholder="item.placeholder"
        allowClear
        :disabled="item.disabled"
        :format="item.format"
      />
      <a-range-picker
        allowClear
        :locale="locale"
        v-model:value="sourceData[item.name]"
        :placeholder="item.placeholder"
        v-else-if="item.style == 'range'"
        :ranges="{
          今天: [moment(), moment()],
          本周: [
            moment().week(moment().week()).startOf('week'),
            moment().week(moment().week()).endOf('week'),
          ],
          本月: [
            moment().month(moment().month()).startOf('month'),
            moment().month(moment().month()).endOf('month'),
          ],
        }"
        :show-time="{
          defaultValue: [
            moment('00:00:00', 'HH:mm:ss'),
            moment('23:59:59', 'HH:mm:ss'),
          ],
        }"
        :format="item.format"
        @change="item.change"
        :disabled="item.disabled"
      />
    </template>
  </a-form-item>
</template>

<script>

import {
  Form,
  Input,
  InputNumber,
  Select,
  Switch,
  Radio,
  Checkbox,
  DatePicker,
  Cascader,
  Upload,
  Space
} from "ant-design-vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";

import { FormItemType } from "assets/js/Constant";
import moment from "moment";

export default {
  name: "FormItem",
  components: {
    AFormItem: Form.Item,
    AInput: Input,
    AInputPassword: Input.Password,
    ATextarea: Input.TextArea,
    AInputNumber: InputNumber,
    ASelect: Select,
    ASelectOption: Select.Option,
    ASwitch: Switch,
    ARadio: Radio,
    ARadioGroup: Radio.Group,
    ARadioButton: Radio.Button,
    ACheckbox: Checkbox,
    ACheckboxGroup: Checkbox.Group,
    ADatePicker: DatePicker,
    ARangePicker: DatePicker.RangePicker,
    ACascader: Cascader,
    AUpload: Upload,
  },
  props: {
    item: {
      default: () => {},
      type: Object
    },
    dataSource: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      locale,
      FormItemType,
      sourceData: {},
    };
  },
  methods: {
    moment,
  },
  created () {
    this.sourceData = this.dataSource;
  }
};
</script>

<style lang="less" scoped>
</style>